<template>
    <div>
        <van-tabs v-model="active">
            <van-tab title="专辑">
                <ul class="mysong">
                    <li v-for="(item,index) in albumList" :key="index">
                        <div class="mysong-img">
                            <img :src="item.artistpic" alt="">
                            <div>
                                <span >{{item.albumname}}</span><br>
                                <span>{{item.artistname}}</span>
                            </div>
                        </div>
                    </li>
                </ul>
            </van-tab>
            <van-tab title="歌曲">
                <ul class="song">
                    <li v-for="(item,index) in searchList" :key="index" @click="changeUrl(item.songid)">
                        <span style="color:orange;">{{index+1}}、</span>
                        <span>{{item.songname}}</span>
                    </li>
                </ul>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
    import {getsearchDetail} from "../api/api";

    export default {
        name: "searcjResult",
        data(){
            return{
                searchList:[],
                albumList:[],
                active:0
            }
        },

        created() {
            getsearchDetail(this.$route.query.query).then(res => {
                console.log(res);
                this.searchList = res.song;
                this.albumList = res.album;
            })
        },
        methods:{
            changeUrl(i){
                this.$router.push('/musicDetail?songId='+i)
            }
        }
    }
</script>

<style lang="less" scoped>
    .mysong {
        li {
            padding: 10px 0;
            margin: 0 20px;
            border-bottom: 1px solid #eeeeee;
            .mysong-img {
                display: flex;
                justify-content: space-between;
                align-items: center;

                img {
                    width: 50px;
                    height: 50px;
                }

                div {
                    width: calc(100% - 60px);
                }

                div span:nth-of-type(2) {
                    font-size: 12px;
                    color: #999999;
                }
            }
        }
    }
    .song{
        li{
            margin: 0 20px;
            padding: 10px 0;
            height: 20px;
            border-bottom: 1px solid #eeeeee;
            font-size: 14px;
        }
    }
</style>